<template>
  <layout :showBg="false">
    <template #header>
      <pageHead title="修改密码" />
    </template>
    <view class="content">
      <!-- <view v-if="step == 1"> -->
      <view class="form-input flex-a">
        <text class="fs-32 c-90">手机号</text>
        <input
          v-model="userInfo.mobile"
          type="text"
          disabled
          placeholder="再一次输入密码"
        />
      </view>
      <view class="code-box flex flex-a-c">
        <u-input
          type="number"
          placeholder="输入验证码"
          prefixIcon="phone"
          prefixIconStyle="font-size: 44rpx;color: #909399"
          class="phone input-item"
          max-length="4"
          v-model="code"
        >
          <view slot="prefix">
            <u-icon name="kefu-ermai"></u-icon>
          </view>
        </u-input>
        <text
          @click="onGetCode"
          :class="time != 59 ? 'code-btn-disabled' : ''"
          class="code-btn t-center"
          >{{ btnText }}</text
        >
      </view>
      <!-- </view> -->
      <!-- <view v-else> -->
      <view class="form-input flex-a">
        <text class="fs-32 c-90">新密码</text>
        <input v-model="password" type="password" placeholder="请输入新密码" />
      </view>
      <view class="form-input flex-a">
        <text class="fs-32 c-90">确认密码</text>
        <input
          v-model="cPassword"
          type="password"
          placeholder="再一次输入密码"
        />
      </view>
      <view class="active-btn" @click="submit">确定</view>
      <!-- </view> -->
    </view>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import pageHead from "../../../compennts/pageHead/index.vue";
import { getCode } from "../../../api/auth";
import { changePwd } from "../../../api/setting/index";
import { getLocalUserInfo } from "../../../assets/utils/index";
export default {
  components: {
    layout,
    pageHead,
  },
  data() {
    return {
      password: "",
      cPassword: "",
      step: 1,
      code: "",
      btnText: "获取验证码",
      time: 59,
      timer: null,
      userInfo:null,
    };
  },
  onShow(){
    this.userInfo = getLocalUserInfo()
  },
  methods: {
    onGetCode() {
      if (this.time != 59) return;
      if (this.timer && this.time != 59) clearInterval(this.timer);
      
      getCode({
        mobile: this.userInfo.mobile,
      }).then((res) => {
        console.log("code", res);
        this.btnText = this.time + "s";
        uni.showToast({
          icon: "none",
          title: "验证码已发送",
          duration: 3000,
        });
        this.timer = setInterval(() => {
          this.time--;
          if (this.time == 0) {
            this.btnText = "获取验证码";
            clearInterval(this.timer);
            this.time = 59;
          } else {
            this.btnText = this.time + "s";
          }
        }, 1000);
      }).catch(() => {
          clearInterval(this.timer);
          this.time = 59;
        });;
    },
    submit() {
      if(this.password != this.cPassword) {
        return this.$u.toast("两次输入密码不一致~");
      }
      changePwd({
        mobile: this.userInfo.mobile,
        verifyCode: this.code,
        password: this.password,
        passwordConfirm: this.cPassword,
      }).then((res) => {
        console.log(res);
        uni.showToast({
          message: "修改成功",
          icon: "none",
        });
        uni.navigateBack()
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.content {
  min-height: 100%;
  background: #f7f8ff;
  padding: 32rpx;
  .form-input {
    display: flex;
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx 32rpx;
    margin-bottom: 32rpx;
    height: 96rpx;
    text {
      width: 140rpx;
    }
    input {
      font-size: 32rpx;
    }
  }
  .code-box {
    margin-bottom: 32rpx;
  }
  .active-btn {
    height: 88rpx;
    line-height: 88rpx;
    margin-top: 64rpx;
  }
  .input-item {
    box-sizing: border-box;
    background-color: #ffffff;
    // margin-top: 32rpx;
    height: 96rpx;
    flex: 1;
  }
  .code-btn {
    width: 224rpx;
    height: 96rpx;
    display: inline-block;
    background: linear-gradient(91deg, #5f82ff 0%, #436af3 100%);
    border-radius: 16rpx;
    // margin-top: 32rpx;
    margin-left: 32rpx;
    color: #ffffff;
    line-height: 96rpx;
    &.code-btn-disabled {
      opacity: 0.5;
    }
  }
}
</style>
